import { Row, Col, Card, Statistic, Avatar, Collapse } from 'antd';
import type { CollapseProps } from 'antd';
import React, { useEffect, useState } from 'react';
import { instance } from "../../utils/request";
import {SendOutlined} from "@ant-design/icons";
const CollapseNotice: React.FC = () => {
  const [items, setItems] = useState<CollapseProps['items']>([]);
  const [firstNoticeId, setFirstNoticeId] = useState<string | number>(1);

  useEffect(() => {
    const params = {
      pagenum: 1,
      pagesize: 5,
      noticeStatus: 0,
      noticeType: 1
    };

    instance.get('/notices', { params })
      .then(response => {
        const data = response.data.data.data;
        const dataArray = Array.isArray(data) ? data : [data];
        const updatedItems = dataArray.map((item: any) => {
          return {
            key: item.notice_id,
            label: (
              <div style={{ fontWeight: "bold", fontSize: "1.2rem", marginBottom: "0.5rem", color:'white' }}>
                {item.notice_name}  <SendOutlined />
              </div>
            ),
            children: (
              <div style={{ paddingLeft: "1rem" }}>
                <p style={{ marginBottom: "0.5rem" }}>{item.notice_content}</p>
                <small>发布人: {item.create_by}</small>
              </div>
            ),
          };
        });
        setItems(updatedItems);
        setFirstNoticeId(dataArray[0]?.notice_id);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const onChange = (key: string | string[]) => {
    console.log(key);
  };

  return (
    <Collapse     size="large" style={{background:'#1677FF'}} accordion onChange={onChange} defaultActiveKey={[String(firstNoticeId)]}>
      {items.map(item => (
        <Collapse.Panel header={item.label} key={item.key}>
          <div>{item.children}</div>
        </Collapse.Panel>
      ))}
    </Collapse>
  );
};

export default CollapseNotice;